<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import { showToast, showConfirmDialog } from "vant";
const router = useRouter();
const onClickLeft = () => {
  router.push("/wys");
};
const fileList = ref([]);

const afterRead = (file) => {
  file.status = "uploading";
  file.message = "上传中...";

  setTimeout(() => {
    file.status = "uploaded";
    file.message = "上传失败";
  }, 1000);
};

const add = () => {
  router.push("/ding/add");
};

const addData = ref(JSON.parse(localStorage.getItem("addData")) || []);

// 点击++ 单价*数量
const plus = (item) => {
  const cartId = item.id; // 获取当前商品的id
  addData.value.forEach((item, index) => {
    if (item.id === cartId) {
      // if判断当前商品的数量是否大于等于库存
      if (item.num >= item.restorativesinven - 1) {
        showToast({ message: "数量不能大于库存" });
      } else {
        item.num += 1;
        // 将购物车数据存储到本地存储中
        localStorage.setItem("addData", JSON.stringify(addData.value));
      }
    }
  });
};

// 点击-- 单价*数量
const minus = (item) => {
  const cartId = item.id; // 获取当前商品的id
  addData.value.forEach((item, index) => {
    if (item.id === cartId) {
      item.num -= 1;
      // 将购物车数据存储到本地存储中
      localStorage.setItem("addData", JSON.stringify(addData.value));
      if (item.num == 0) {
        // 从本地存储删除
        showConfirmDialog({
          title: "确认删除该商品吗？",
          message: "删除后，此商品将不会出现在购物车中，确定删除？",
        })
          .then(() => {
            addData.value.splice(index, 1);
            localStorage.setItem("addData", JSON.stringify(addData.value));
            // 删除商品提示
            showToast({ message: "删除成功" });
          })
          .catch(() => {
            item.num = 1;
          });
      }
    }
  });
};

// 失焦
const blur = (item) => {
  const cartId = item.id; // 获取当前商品的id
  addData.value.forEach((item, index) => {
    if (item.id === cartId) {
      if (item.num == item.restorativesinven) {
        showToast({ message: "输入的数量不能大于库存数量哦！" });
        item.num = item.restorativesinven;
        // 将购物车数据存储到本地存储中
        localStorage.setItem("addData", JSON.stringify(addData.value));
      } else if (item.num <= 0) {
        // 从本地存储删除
        showConfirmDialog({
          title: "确认删除该商品吗？",
          message: "删除后，此商品将不会出现在购物车中，确定删除？",
        })
          .then(() => {
            addData.value.splice(index, 1);
            localStorage.setItem("addData", JSON.stringify(addData.value));
            // 删除商品提示
            showToast({ message: "删除成功" });
          })
          .catch(() => {
            item.num = 1;
            // 将购物车数据存储到本地存储中
            localStorage.setItem("addData", JSON.stringify(addData.value));
          });
      }
    }
  });
};

// 单选
const alonchek = (ind) => {
  addData.value[ind].checked = !addData.value[ind].checked;
  console.log(addData.value[ind].checked);
  localStorage.setItem("addData", JSON.stringify(addData.value));
};
</script>

<template>
  <div class="box">
    <van-nav-bar title="复诊开方申请" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="weapp-nav" size="18" />
      </template>
    </van-nav-bar>
    <div class="fztk">
      <div class="fztk-item">
        <div class="com">
          <div class="top"><span class="se">*</span>选择就诊人</div>
          <img
            style="width: 140px; height: 90px"
            @click="router.push('/danga')"
            src="../3.png"
            alt=""
          />
        </div>
        <div class="com">
          <div class="top">
            <span class="se">*</span>选择线下已确诊疾病<span class="xiao"
              >(至少选择1钟疾病)</span
            >
          </div>
          <img style="width: 80px; height: 80px" src="../3.png" alt="" />
        </div>
      </div>
      <div class="main">
        <div class="top">复诊凭证（选填）</div>
        <div style="font-size: 0.3rem; color: #ccc">
          门诊/住院病历、检查单/检查结果、处方、住院单等
        </div>
        <van-uploader v-model="fileList" :after-read="afterRead" />
      </div>
      <div class="comcc">
        <div class="top">申请用药</div>
        <button
          style="
            border: 0.01rem dashed #ccc;
            font-size: 0.4rem;
            background: #fff;
            width: 7rem;
            height: 1.5rem;
          "
          @click="add"
        >
          +添加药品
        </button>

        <div class="com">
          <dl v-for="(item, ind) in addData" :key="ind">
            <input type="checkbox" :checked="item.checked" @click="alonchek(ind)" />
            <dt>
              <img :src="item.restorativesimage" alt="" />
            </dt>
            <dd>
              <div class="tttt">
                <span class="se">{{ item.restorativestitle }}</span>
                <div class="title" style="text-indent: 0.7rem">
                  {{ item.restorativesdesc }}
                </div>
              </div>
              <div class="btn">
                <div class="price">￥{{ item.restorativesprice * item.num }}.00</div>
                <van-stepper
                  style="
                    border: 0.03rem solid #969799;
                    height: 0.63rem;
                    line-height: 0.4rem;
                    border-radius: 0.1rem;
                  "
                  v-model="item.num"
                  @plus="plus(item)"
                  @minus="minus(item)"
                  @blur="blur(item)"
                  :integer="true"
                  :max="item.restorativesinven"
                  min="0"
                />
              </div>
            </dd>
          </dl>
        </div>
      </div>

      <div class="footer">
        <van-button style="width: 95%; margin-left: 2.5%" type="primary" size="large"
          >发消息</van-button
        >
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 复诊申请
.box {
  width: 100%;
  height: 100%;
  position: relative;

  .fztk {
    width: 100%;
    height: 617px;
    background-color: #f5f5f5;
    overflow: scroll;

    .fztk-item {
      width: 95%;
      margin-left: 2.5%;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 10px;

      .com {
        width: 95%;
        margin-left: 2.5%;
        background-color: #fff;
        border-radius: 10px;

        .top {
          padding: 15px 10px;
          font-size: 0.35rem;
          font-weight: bolder;

          .se {
            color: orangered;
            font-size: 0.3rem;
            float: left;
            margin-right: 5px;
            margin-top: 5px;
          }

          .xiao {
            font-size: 0.25rem;
            color: orangered;
          }
        }
      }
    }

    .main {
      width: 95%;
      margin-left: 2.5%;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 10px;
      padding-left: 10px;
      padding-bottom: 10px;
      margin-bottom: 10px;

      .top {
        padding: 10px 0;
        font-size: 0.35rem;
        font-weight: bolder;
      }
    }

    .comcc {
      width: 95%;
      margin-left: 2.5%;
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 2rem;

      .top {
        padding: 15px 10px;
        font-size: 0.35rem;
        font-weight: bolder;
      }

      .com {
        width: 97%;
        height: 100%;
        margin-left: 3%;
        margin: 0;
        padding: 0;
        padding-top: 1rem;

        dl {
          width: 97%;
          height: 2.7rem;
          margin-left: 2.5%;
          display: flex;
          border-bottom: 1px solid #f0f0f0;
          margin-top: -1rem;

          dt {
            width: 2rem;
            height: 100%;

            img {
              margin-top: 0.2rem;
              width: 1.5rem;
              height: 1.5rem;
              margin-left: 0.25rem;
            }
          }

          dd {
            width: 95%;
            height: 2.5rem;
            margin-left: 2.5%;

            .tttt {
              width: 100%;
              height: 0.9rem;
              position: relative;
              margin-top: 0.25rem;

              .se {
                float: left;
                color: #ffffff;
                background-color: #236dd4;
                font-size: 0.2rem;
                padding: 0 0.07rem;
                border-top-left-radius: 0.3rem;
                border-top-right-radius: 0.03rem;
                border-bottom-left-radius: 0.03rem;
                border-bottom-right-radius: 0.3rem;
                top: 0.1rem;
                position: absolute;
              }

              .title {
                width: 100%;
                font-size: 0.35rem;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
              }
            }

            .btn {
              width: 100%;
              height: 0.8rem;

              .price {
                font-size: 0.3rem;
                color: rgb(255, 123, 0);
              }

              .add {
                width: 1.2rem;
                height: 0.6rem;
                line-height: 0.6rem;
                text-align: center;
                background-color: #006aff;
                color: #fff;
                border-radius: 0.1rem;
              }
            }
          }
        }
      }
    }

    .footer {
      width: 100%;
      height: 90px;
      background-color: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
}
</style>
